<template>
	<pageViewContainer>
		<template #headerTool>
			<el-button type="success" icon="FolderAdd" @click="edit(null)" style="margin-right: 10px;">新增</el-button>
			<el-button-group>
				<el-button type="primary" icon="Search"
					@click="$refs.searchCard.show = !$refs.searchCard.show"></el-button>
				<el-button type="primary" :icon="!tableAllOpen ? 'FolderOpened' : 'FolderRemove'"
					@click="tableAllOpen = !tableAllOpen"></el-button>
			</el-button-group>
		</template>

		<div class="row" style="position:absolute;width: 100%;height: 100%;" v-loading="tableLoading">
			<el-table ref="table" :expand-row-keys="expandRowKeys" :row-class-name="tableRowClassName" :data="tableData"
				:border="false" row-key="id" class="flex1 table1">
				<el-table-column prop="id" label="Id" />
				<el-table-column prop="name" label="名称" />
				<el-table-column prop="type" label="类型" />
				<el-table-column prop="value" label="类型值" />
				<el-table-column prop="show" label="展示状态">
					<template #default="scope">
						<div>
							<el-switch v-model="scope.row.show" :active-value="1" :inactive-value="0" width="50"
								inline-prompt active-text="展示" inactive-text="隐藏" />
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="action" label=" " align="center" width="200">
					<template #default="scope">
						<el-button link type="" icon="Edit" size="small" @click="edit(scope.row)">编辑</el-button>
						<el-divider direction="vertical" />
						<el-popconfirm class="box-item" title="删除后不可恢复,确认删除吗?" placement="bottom"
							@confirm="delMenu(scope.row.id)">
							<template #reference>
								<el-button link type="danger" icon="Delete" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<template #left>
			<searchCard ref="searchCard" @formDataChange="search" :formOption="searchOption" />
		</template>

		<!-- 新增 编辑 -->
		<editTem ref="editTem" :menusList="tableData" @editSuccess="getAllMenus"></editTem>
	</pageViewContainer>
</template>

<script>
import {
	ElMessage
} from 'element-plus'
import editTem from './components/editTem.vue'
import {
	useMenusStore
} from '../../../stores/menus'
export default {
	components: {
		editTem
	},
	data() {
		return {
			tableLoading: true,
			expandRowKeys: [],
			tableAllOpen: false,
			tableData: [],
			searchOption: [{
				componentsName: 'el-input',
				label: "名称",
				value: '',
				key: 'name'
			}, {
				componentsName: 'el-date-picker',
				label: "名称",
				value: '',
				key: 'name'
			}]
		}
	},
	computed: {
		menusStore() {
			return useMenusStore()
		}
	},
	watch: {
		tableAllOpen(a, b) {
			this.expandAllRow(a ? 'open' : 'close')
		}
	},
	created() {
		this.getAllMenus()
	},
	methods: {
		delMenu(menuId) {
			this.menusStore.delMenu(menuId).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message)
				}
				ElMessage.success(res.message)
				this.getAllMenus()
			}).catch(err => {
				ElMessage.error(`删除失败,${err.message}`)
			})
		},
		getAllMenus() {
			this.menusStore.getAllMenus().then(res => {
				if (res.code !== 200) {
					throw new Error(res.message)
				}
				this.tableData = res.data.tree
			}).catch(err => {
				ElMessage.error(`数据加载失败,${err.message}`)
			}).finally(() => {
				this.tableLoading = false
			})
		},
		tableRowClassName({
			row,
			rowIndex
		}) {
			if (row.isVague) {
				return 'vague'
			} else {
				return ''
			}
		},
		//展开 合并所有行 open / close
		expandAllRow(type = 'open') {
			if (type == 'close') {
				this.expandRowKeys = []
				return
			}
			let ids = []
			const fun = (data) => {
				for (let i = 0; i < data.length; i++) {
					var item = data[i]
					ids.push(String(item.id))
					if (item.children && Array.isArray(item.children)) {
						fun(item.children)
					}
				}
			}
			fun(this.tableData)
			this.expandRowKeys = ids
		},
		search(formData) {
			console.log(formData)
			this.tableAllOpen = true
			const fun = (data) => {
				for (let i = 0; i < data.length; i++) {
					const item = data[i];
					item.isVague = false
					if (item.name.indexOf(formData.name) === -1) {
						item.isVague = true
					}
					if (item.children && Array.isArray(item.children)) {
						fun(item.children)
					}
				}
			}
			fun(this.tableData)
		},
		edit(menuItem = null) {
			if (menuItem) {
				this.$refs.editTem.menuItem = JSON.parse(JSON.stringify(menuItem))
			}
			this.$refs.editTem.show = true
		},
		getData() {
			this.tableData = [{
				id: 1,
				name: 'aa',
				type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
				show: '1',
				value: '',
				isVague: false,
				children: [{
					id: 31,
					name: 'bb',
					type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
					show: '1',
					value: '',
					isVague: false,
				},
				{
					id: 32,
					name: 'cc',
					type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
					show: '1',
					value: '',
					isVague: false,
					children: [{
						id: 311,
						name: 'bb',
						type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
						show: '1',
						value: '',
						isVague: false,
					},
					{
						id: 321,
						name: 'cc',
						type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
						show: '1',
						value: '',
						isVague: false,
						children: [{
							id: 341,
							name: 'bb',
							type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
							show: '1',
							value: '',
							isVague: false,
						},
						{
							id: 342,
							name: 'cc',
							type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
							show: '1',
							value: '',
							isVague: false,
						},
						],
					},
					],
				},
				],
			}, {
				id: 22,
				name: 'aa',
				type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
				show: '1',
				value: '',
				isVague: false,
				children: [{
					id: 321,
					name: 'bb',
					type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
					show: '1',
					value: '',
					isVague: false,
				},
				{
					id: 322,
					name: 'cc',
					type: "group", //group = 菜单组  route = 路由 dom_auto = dom节点权限
					show: '1',
					value: '',
					isVague: false,
				},
				],
			},]

		}
	}
}
</script>

<style scoped lang="less">
:deep(.el-table .vague) {
	filter: blur(2px);
}

.table1 {
	border: 1px solid var(--el-border-color-light);
	border-bottom: 0;
}
</style>